<template>
  <view class="">
    <view class="box" @touchstart="handstart" @touchend="handend"></view>
  </view>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      starTime: 0,
      endTime: 0,
      startx: 0,
      starty: 0,
      endx: 0,
      endy: 0,
    };
  },

  methods: {
    handstart(e) {
      this.starTime = Date.now();
      this.startx = e.changedTouches[0].clientX;
      this.starty = e.changedTouches[0].clientY;
    },
    handend(e) {
      let dir = "";
      this.endTime = Date.now();
      this.endx = e.changedTouches[0].clientX;
      this.endy = e.changedTouches[0].clientY;
      if (Math.abs(this.endx - this.startx) > 10) {
        dir = this.endx - this.startx > 0 ? "右滑动" : "左滑动";
      }
      console.log(dir);
    },
  },
};
</script>
<style scoped>
.box {
  width: 300rpx;
  height: 300rpx;
  background-color: chocolate;
}
</style>
